<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>画布Canvas API基础-模拟时钟</title>
	</head>
	<body>
		<canvas id="mycanv" width="600" height="600"></canvas>
		<script>
			//获取绘画接口
			/**@type{HTMLCanvasElement} */
			var canv = document.getElementById('mycanv');
			var ctx = canv.getContext('2d');
			//模拟时钟
			//移动画布,重置原点
			ctx.translate(300, 300);

			requestAnimationFrame(setClock);

			function setClock() {
				ctx.clearRect(-300, -300, 600, 600);
				setRRect(-250, -250, 500, 500, 80);

				ctx.save();
				ctx.beginPath();
				ctx.arc(0, 0, 220, 0, 2 * Math.PI);
				ctx.fillStyle = '#eee';
				ctx.fill();
				ctx.beginPath();
				ctx.fillStyle = '#111';
				ctx.arc(0, 0, 8, 0, 2 * Math.PI);
				ctx.fill();
				ctx.restore();
				//绘制刻度
				/*
				for (let i = 0; i < 60; i++) {
					
					let linew = i % 5 ? 2 : 4,
						lineh = i % 5 ? -205 : -195;
					setLine(6 * i, linew, lineh, -215);
					
				}*/
				//绘制数字
				for (let i = 1; i <= 12; i++) {
					setText(i, i * 30);
				}
				//绘制指针
				var cdate = new Date();
				var hh = cdate.getHours(),
					mm = cdate.getMinutes(),
					ss = cdate.getSeconds(),
					ms = cdate.getMilliseconds();
				setLine(hh * 30 + mm / 2, 6, 0, -160);
				setLine(mm * 6, 4, 0, -190);
				setLine(ss * 6 + ms * (6 / 1000), 2, 30, -215, '#f41');
				ctx.save();
				ctx.beginPath();
				ctx.arc(0, 0, 5, 0, 2 * Math.PI);
				ctx.fillStyle = '#f41';
				ctx.fill();
				ctx.restore();
				requestAnimationFrame(setClock);
			}
			function setRRect(x, y, w, h, r) {
				ctx.save();
				ctx.beginPath();
				ctx.moveTo(x, y + r);
				ctx.arcTo(x, y + h, x + w, y + h, r);
				ctx.arcTo(x + w, y + h, x + w, y, r);
				ctx.arcTo(x + w, y, x, y, r);
				ctx.arcTo(x, y, x, y + h, r);
				ctx.closePath();
				ctx.stroke();
				ctx.fillStyle = '#111';
				ctx.fill();
				ctx.restore();
			}
			function setText(str, deg) {
				ctx.save();
				ctx.rotate((deg * Math.PI) / 180);
				ctx.font='20px Arial'
				ctx.textAlign='center'
				ctx.fillText(str, 0, -200);
				ctx.restore();
			}
			function setLine(hms, lw, lh_0, lh_1, c) {
				ctx.save();
				ctx.rotate((hms * Math.PI) / 180);
				ctx.beginPath();
				ctx.moveTo(0, lh_0);
				ctx.lineTo(0, lh_1);
				ctx.lineCap = 'round';
				ctx.strokeStyle = c || '#111';
				ctx.lineWidth = lw;
				ctx.stroke();
				ctx.restore();
			}
		</script>
	</body>
</html>
